<template>
  <div :class="['select', isShow == true ? 'active' : '']">
    <div class="wrap" ref="wrap">
      <div class="box">
        <div class="item">
          <span :class="['tt_select', a == 0 ? 'active' : '']" @click="tab1(0)">
            综合排序
          </span>
          <span :class="['tt_select', a == 1 ? 'active' : '']" @click="tab1(1)">
            最多更新
          </span>
          <span :class="['tt_select', a == 2 ? 'active' : '']" @click="tab1(2)">
            最近更新
          </span>
        </div>
      </div>

      <div class="box" v-for="(item, i) in categoryMeta" :key="i">
        <div class="item">
          <span class="tt_select active" @click="clickTab">
            {{ item.displayName }}
          </span>
          <span
            class="tt_select"
            v-for="(ele, index) in item.metaValues"
            :key="index"
            @click="clickTab"
          >
            {{ ele.displayName }}
          </span>
        </div>
      </div>
      <div class="shou" @click="show">
        <van-icon name="filter-o" />&nbsp;{{ isShow == false ? '筛选' :'收起'}}
      </div>

      
    </div>
    <div class="mask"
      :style="`top:${top}px;background:red;`"
      ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      a: 0,
      top:0,
    };
  },
  props: {
    categoryMeta: {
      type: Array,
    },
    isClose: {
      type: Boolean,
    },
  },
  watch: {
    // isClose(new1,old1){
    //     console.log(new1,old1)
    //     if(val){
    //         console.log(666)
    //     }else{
    //         this.isShow = false;
    //         // this.$emit("show-mask", this.isShow);
    //     }
    // }
  },

  methods: {
    show() {
      this.isShow = !this.isShow;
      this.$emit("show-mask", this.isShow);
    },
    tab1(a) {
      this.a = a;
      this.$emit("updata", a);
    },
    clickTab(e) {
      for (let i = 0; i < e.target.parentNode.children.length; i++) {
        e.target.parentNode.children[i].classList.remove("active");
      }
      e.target.classList.add("active");
      // console.log(e.target.parentNode.)
      // console.log(e.target)
    },
  },
  mounted(){
     this.top =  this.$refs.wrap.offsetHeight
  }
};
</script>


<style lang="scss" scoped>
.select {
  // background-color: pink;
position: relative;
  width: 100%;
  height: 44px;
  overflow: hidden;
  .wrap {
    padding: 0 0 0 15px;
   
    
    .box::-webkit-scrollbar {
      display: none;
    }
    .box {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      .item {
        flex-shrink: 0;
        span:nth-child(1) {
          margin-right: 6px;
        }
        span {
          display: inline-block;
          height: 28px;
          border-radius: 14px;
          font-size: 14px;
          color: #a3a3ac;
          line-height: 28px;
          padding: 0 12px;
          margin: 8px 0px 8px 0;
        }
        span.active {
          border: 1px solid #f86442;
          color: #f86442;
        }
      }
    }

    .shou {
      position: absolute;
      right: 15px;
      top: 8px;
      width: 66px;
      height: 27px;
      border-radius: 13.5px;
      text-align: center;
      line-height: 27px;
      color: #a3a3ac;
      font-size: 12px;
      background-color: #f3f4f5;
    }
    
  }

}

.select.active {
  height: auto;
  overflow: none;
}
</style>

